<!--
 * @Author: yumao 123456
 * @Date: 2023-05-31 10:09:54
 * @LastEditors: yumao 123456
 * @LastEditTime: 2024-03-12 16:37:34
 * @FilePath: \zyDataScreen\src\views\sjdp\components\ZyScreenLeft.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="leftBox">
        <div class="chart-box L1_box">
            <!-- <div class="chart-box-title">
                月挂牌-成交量 <span class="unit">（单位：个）</span>
                <div
                    class="openIcon"
                    style="right: -90px; top: 2px"
                    @click.stop="openInfo('月挂牌成交量')"
                >
                    <img src="@/assets/home/start.png" alt="" />
                </div>
            </div>

            -->
            <div class="titledisBox">
                <div
                    :class="[
                        'chart-box-titledisThr',
                        gpcjActiveis == '月挂牌-成交量' ? 'active' : ''
                    ]"
                    @click="changeGPCJ('月挂牌-成交量')"
                >
                    月挂牌-成交量 <span class="unit"></span>
                </div>
                <div
                    :class="[
                        'chart-box-titledisThr r1',
                        gpcjActiveis == '挂牌量同比' ? 'active' : ''
                    ]"
                    @click="changeGPCJ('挂牌量同比')"
                >
                    挂牌量同比<span class="unit"></span>
                </div>
                <div
                    :class="[
                        'chart-box-titledisThr r2',
                        gpcjActiveis == '成交量同比' ? 'active' : ''
                    ]"
                    @click="changeGPCJ('成交量同比')"
                >
                    成交量同比<span class="unit"></span>
                    <div
                        class="openIcon"
                        style="right: 10px; top: 0px"
                        @click.stop="openInfo('月挂牌成交量', false)"
                    >
                        <img src="@/assets/home/start.png" alt="" />
                    </div>
                </div>
            </div>
            <div v-show="gpcjActiveis == '月挂牌-成交量'">
                <div class="chartIobox">
                    <div
                        id="leftChart1"
                        style="width: 435px; height: 230px"
                    ></div>
                </div>
            </div>
            <div v-show="gpcjActiveis == '挂牌量同比'">
                <div class="chartIobox">
                    <div
                        id="leftChart1_1"
                        style="width: 435px; height: 230px"
                    ></div>
                </div>
            </div>
            <div v-show="gpcjActiveis == '成交量同比'">
                <div class="chartIobox">
                    <div
                        id="leftChart1_2"
                        style="width: 435px; height: 230px"
                    ></div>
                </div>
            </div>
        </div>
        <div class="chart-box L2_box">
            <!-- <div class="chart-box-title">
                月挂牌-成交金额<span class="unit">（单位：万元）</span>
                <div
                    class="openIcon"
                    style="right: -90px; top: 2px"
                    @click.stop="openInfo('月挂牌成交量金额')"
                >
                    <img src="@/assets/home/start.png" alt="" />
                </div>
            </div> -->
            <div class="titledisBox">
                <div
                    :class="[
                        'chart-box-titledisThr',
                        YgpcjjeActiveis == '月挂牌-成交金额' ? 'active' : ''
                    ]"
                    @click="changeYGPCJJE('月挂牌-成交金额')"
                >
                    月挂牌-成交金额 <span class="unit"></span>
                </div>
                <div
                    :class="[
                        'chart-box-titledisThr r1',
                        YgpcjjeActiveis == '挂牌金额同比' ? 'active' : ''
                    ]"
                    @click="changeYGPCJJE('挂牌金额同比')"
                >
                    挂牌金额同比<span class="unit"></span>
                </div>
                <div
                    :class="[
                        'chart-box-titledisThr r2',
                        YgpcjjeActiveis == '成交金额同比' ? 'active' : ''
                    ]"
                    @click="changeYGPCJJE('成交金额同比')"
                >
                    成交金额同比<span class="unit"></span>
                    <div
                        class="openIcon"
                        style="right: 10px; top: 0px"
                        @click.stop="openInfo('月挂牌成交量金额', false)"
                    >
                        <img src="@/assets/home/start.png" alt="" />
                    </div>
                </div>
            </div>
            <div v-show="YgpcjjeActiveis == '月挂牌-成交金额'">
                <div class="chartIobox">
                    <div
                        id="leftChart2"
                        style="width: 435px; height: 230px"
                    ></div>
                </div>
            </div>
            <div v-show="YgpcjjeActiveis == '挂牌金额同比'">
                <div class="chartIobox">
                    <div
                        id="leftChart2_1"
                        style="width: 435px; height: 230px"
                    ></div>
                </div>
            </div>
            <div v-show="YgpcjjeActiveis == '成交金额同比'">
                <div class="chartIobox">
                    <div
                        id="leftChart2_2"
                        style="width: 435px; height: 230px"
                    ></div>
                </div>
            </div>
        </div>
        <div class="chart-box L3_box">
            <div class="titledisBox">
                <div
                    :class="[
                        'chart-box-titledis',
                        activeis == '挂牌' ? 'active' : ''
                    ]"
                    @click="changeCP('挂牌')"
                >
                    挂牌金额 <span class="unit">（单位：元）</span>
                    <div
                        class="openIcon"
                        style="right: 40px; top: 0px"
                        @click.stop="openInfo('挂牌金额', false)"
                    >
                        <img src="@/assets/home/start.png" alt="" />
                    </div>
                </div>
                <div
                    :class="[
                        'chart-box-titledis r',
                        activeis == '成交' ? 'active' : ''
                    ]"
                    @click="changeCP('成交')"
                >
                    成交金额<span class="unit">（单位：元）</span>
                    <div
                        class="openIcon"
                        style="right: 50px; top: 0px"
                        @click.stop="openInfo('成交金额', false)"
                    >
                        <img src="@/assets/home/start.png" alt="" />
                    </div>
                </div>
            </div>

            <div v-show="activeis == '挂牌'">
                <div class="chartIobox">
                    <div class="chartArr">
                        <div class="chartArrItem" v-if="activeis == '挂牌'">
                            <!-- <div
                                id="leftChart3"
                                style="width: 100%; height: 220px"
                            ></div> -->
                            <div class="datavBox">
                                <dv-active-ring-chart
                                    :config="config3"
                                    style="width: 100%; height: 130px"
                                />
                                <ul class="chartDatavEL">
                                    <li
                                        v-for="(item, index) in config3.data"
                                        :key="index"
                                        @click="changeListedAmount(item.name)"
                                        style="cursor: pointer"
                                    >
                                        <div
                                            class="radiu"
                                            :style="{
                                                'background-color':
                                                    config3.color[index]
                                            }"
                                        ></div>
                                        <p>{{ item.name }}</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="chartArrItem">
                            <div
                                id="leftChart4"
                                style="width: 100%; height: 220px"
                            ></div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-show="activeis == '成交'">
                <div class="chartIobox">
                    <div class="chartArr">
                        <div class="chartArrItem" v-if="activeis == '成交'">
                            <!-- <div
                                id="leftChart5"
                                style="width: 259px; height: 220px"
                            ></div> -->
                            <div class="datavBox">
                                <dv-active-ring-chart
                                    :config="config5"
                                    style="width: 208px; height: 130px"
                                />
                                <ul class="chartDatavEL">
                                    <li
                                        v-for="(item, index) in config5.data"
                                        :key="index"
                                        @click="
                                            changeTransactionAmount(item.name)
                                        "
                                        style="cursor: pointer"
                                    >
                                        <div
                                            class="radiu"
                                            :style="{
                                                'background-color':
                                                    config5.color[index]
                                            }"
                                        ></div>
                                        <p>{{ item.name }}</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="chartArrItem">
                            <div
                                id="leftChart6"
                                style="width: 172px; height: 220px"
                            ></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { screenLeftData } from '@/api/home.js'
import * as echarts from 'echarts'
export default {
    props: {
        paramsData: {
            type: Object,
            default: {
                city: '',
                area: '',
                operator: '',
                fromDate: '2023-01-01',
                toDate: '2023-12-31',
                year: '',
                month: '',
                customer: '',
                listedAmount: '',
                transactionAmount: '',
                fee: '',
                bid: '',
                bidTop: '',
                day: '',
                returningCustomer: '',
                page: '',
                pageSize: ''
            }
        }
    },
    data() {
        return {
            activeis: '挂牌',

            leftChart1: null, //图表对象
            leftChart1_1: null, //图表对象
            leftChart1_2: null, //图表对象
            leftChart2: null, //图表对象
            leftChart2_1: null, //图表对象
            leftChart2_2: null, //图表对象
            leftChart3: null, //图表对象
            leftChart4: null, //图表对象
            leftChart5: null, //图表对象
            leftChart6: null, //图表对象
            config3: {
                color: [
                    '#4796DB',
                    '#493FEE',
                    '#8C03E7',
                    '#C76F3D',
                    '#36B59D',
                    '#8CAF49',
                    '#D4CC40',
                    '#FFC94B'
                ],
                data: [],
                lineWidth: 15,
                radius: '70%',
                activeRadius: '78%',
                digitalFlopStyle: {
                    fontSize: 12,
                    fill: '#fff'
                }
            },
            config5: {
                color: [
                    '#4796DB',
                    '#493FEE',
                    '#8C03E7',
                    '#C76F3D',
                    '#36B59D',
                    '#8CAF49',
                    '#D4CC40',
                    '#FFC94B'
                ],
                data: [],
                lineWidth: 15,
                radius: '70%',
                activeRadius: '78%',
                digitalFlopStyle: {
                    fontSize: 12,
                    fill: '#fff'
                }
            },
            gpcjActiveis: '月挂牌-成交量',
            YgpcjjeActiveis: '月挂牌-成交金额'
        }
    },
    computed: {},
    created() {},
    mounted() {
        this.$nextTick(() => {
            this.leftChartgetall()
        })
    },
    watch: {},
    methods: {
        leftChartgetall(data) {
            screenLeftData(this.paramsData).then((res) => {
                let resData = res.data

                // （x,y）
                this.drawleftChart1(
                    resData.MonthlyListingTransactions.line.xAxis,
                    resData.MonthlyListingTransactions.line.series
                )
                this.drawleftChart1_1(
                    resData.MonthlyListingYoY.line.xAxis,
                    resData.MonthlyListingYoY.line.series
                )
                this.drawleftChart1_2(
                    resData.MonthlyTransactionsYoY.line.xAxis,
                    resData.MonthlyTransactionsYoY.line.series
                )
                this.drawleftChart2(
                    resData.MonthlyListingTransactionsMoney.line.xAxis,
                    resData.MonthlyListingTransactionsMoney.line.series
                )
                this.drawleftChart2_1(
                    resData.MonthlyListingMoneyYoY.line.xAxis,
                    resData.MonthlyListingMoneyYoY.line.series
                )
                this.drawleftChart2_2(
                    resData.MonthlyTransactionsMoneyYoY.line.xAxis,
                    resData.MonthlyTransactionsMoneyYoY.line.series
                )
                // let pieData = resData.ListingAmount.ListingAmountPie.map(
                //     (item) => {
                //         return {
                //             name: item.key,
                //             value: item.value
                //         }
                //     }
                // )
                // this.drawleftChart3(pieData)
                this.config3.data = resData.ListingAmount.ListingAmountPie.map(
                    (item) => {
                        return {
                            name: item.key,
                            value: item.value
                        }
                    }
                )
                this.config3 = { ...this.config3 }

                this.drawleftChart4(
                    resData.ListingAmount.ListingAmountBar.xAxis,
                    resData.ListingAmount.ListingAmountBar.series
                )
                // let pieData5 =
                //     resData.TransactionAmount.TransactionAmountPie.map(
                //         (item) => {
                //             return {
                //                 name: item.key,
                //                 value: item.value
                //             }
                //         }
                //     )
                // this.drawleftChart5(pieData5)
                this.config5.data =
                    resData.TransactionAmount.TransactionAmountPie.map(
                        (item) => {
                            return {
                                name: item.key,
                                value: item.value
                            }
                        }
                    )
                this.config5 = { ...this.config5 }
                this.drawleftChart6(
                    resData.TransactionAmount.TransactionAmountBar.xAxis,
                    resData.TransactionAmount.TransactionAmountBar.series
                )
            })
        },
        drawleftChart1(xAxis, series) {
            this.leftChart1 = this.$echarts.init(
                document.getElementById('leftChart1')
            )
            let option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#040B15',
                    borderColor: '#040B15',
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.65)',
                        fontSize: 12
                    }
                },
                grid: {
                    show: false,
                    top: '12%', // 一下数值可为百分比也可为具体像素值
                    right: '5%',
                    bottom: '25%',
                    left: '10%'
                },
                legend: {
                    data: [
                        {
                            name: series[0].name,
                            itemStyle: {
                                color: '#48B1F6'
                            }
                        },
                        {
                            name: series[1].name,
                            itemStyle: {
                                color: '#DEA378'
                            }
                        }
                    ],
                    bottom: '0%',
                    left: 'center',
                    textStyle: {
                        color: '#ffffff'
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    icon: 'circle',
                    fontSize: 12
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xAxis,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisTick: {
                            show: true,
                            color: 'rgba(131, 143, 141, 1)'
                        },
                        axisLabel: {
                            color: 'rgba(131, 143, 141, 1)',
                            interval: 0 // 横轴信息全部显示
                            // rotate: -30 // -30度角倾斜显示
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '单位（个）',
                        nameTextStyle: {
                            color: 'rgba(255, 255, 255, 0.65)'
                        },
                        axisLabel: {
                            color: 'rgba(131, 143, 141, 1)' // y 轴标注颜色
                        },

                        splitLine: {
                            lineStyle: {
                                type: 'solid',
                                color: 'rgba(53, 65, 91, 1)'
                            },
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        name: series[0].name,
                        type: 'bar',
                        data: series[0].data,

                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, // 右
                                y: 0, // 下
                                x2: 0, // 左
                                y2: 1, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(89, 160, 215, 0.70)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(89, 160, 215, 0.1)' // 100% 处的颜色
                                    }
                                ]
                            }
                        },
                        barWidth: 8,
                        label: {
                            show: true,
                            width: 8,
                            height: 8,
                            borderRadius: 1000,
                            color: 'rgba(0,0,0,0)',
                            backgroundColor: 'rgba(115, 213, 255, 1)',
                            position: ['1%', -3],
                            shadowBlur: 10,
                            shadowColor: '#48B1F6'
                        }
                    },
                    {
                        name: series[1].name,
                        type: 'bar',
                        tooltip: {},
                        data: series[1].data,

                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, // 右
                                y: 0, // 下
                                x2: 0, // 左
                                y2: 1, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(223, 164, 120, 0.70)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(223, 164, 120, 0.1)' // 100% 处的颜色
                                    }
                                ]
                            }
                        },
                        barWidth: 8,
                        // barGap: '100%',
                        label: {
                            show: true,
                            width: 8,
                            height: 8,
                            borderRadius: 1000,
                            color: 'rgba(0,0,0,0)',
                            backgroundColor: 'rgba(255, 201, 75, 1)',
                            position: ['0%', -4],
                            shadowBlur: 6,
                            shadowColor: '#FBCC00'
                        }
                    }
                ]
            }

            this.leftChart1.setOption(option)
            this.leftChart1.on('click', this.handleClick1)
        },
        drawleftChart1_1(xAxis, series) {
            this.leftChart1_1 = this.$echarts.init(
                document.getElementById('leftChart1_1')
            )
            let option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#040B15',
                    borderColor: '#040B15',
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.65)',
                        fontSize: 12
                    },
                    formatter: function (params) {
                        // params 是 formatter 需要的数据集
                        let content = ''

                        params.forEach((item) => {
                            let colorArr = ['#48B1F6', '#DEA378']
                            // 提示框的内容样式及数据
                            content += `<div style="height: 20px; line-height: 20px;">
          <!-- 圆点样式 -->
          <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${
              colorArr[item.seriesIndex]
          };"></span>
          <span style="color: rgba(255, 255, 255, 0.65);">${
              item.seriesName
          }:</span>
          <span style="color: rgba(255, 255, 255, 0.65);">${item.value}</span>
         
        </div>`
                        })
                        // 提示框外框样式及内容数据
                        const htmlContent = `<div style="width: 150px; height: 90px;">
        <!-- 提示框顶部标题样式及数据 smsUseData.xAxis.date（标题数据）-->
        <div style="color: rgba(255, 255, 255, 0.65); padding: 0px 16px;">
        ${xAxis[params[0].dataIndex]}
        </div>
        <div style="padding: 4px 8px; position: relative;">
          ${content}
        </div>
        <div style="color: rgba(255, 255, 255, 0.75); padding: 0px 8px;font-size: 14px;
        font-weight: 600;">
           同比：<span style="color: ${
               series[2].data[params[0].dataIndex] > 0
                   ? '#f73131c2'
                   : '#0ebe98d6'
           }"> <span>${
                            series[2].data[params[0].dataIndex] > 0 ? '+' : ''
                        }</span>${series[2].data[params[0].dataIndex]}%</span>
        </div>
      </div>`

                        return htmlContent
                    }
                },
                grid: {
                    show: false,
                    top: '12%', // 一下数值可为百分比也可为具体像素值
                    right: '5%',
                    bottom: '25%',
                    left: '10%'
                },
                legend: {
                    data: [
                        {
                            name: series[0].name,
                            itemStyle: {
                                color: '#48B1F6'
                            }
                        },
                        {
                            name: series[1].name,
                            itemStyle: {
                                color: '#DEA378'
                            }
                        }
                    ],
                    bottom: '0%',
                    left: 'center',
                    textStyle: {
                        color: '#ffffff'
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    icon: 'circle',
                    fontSize: 12
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xAxis,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisTick: {
                            show: true,
                            color: 'rgba(131, 143, 141, 1)'
                        },
                        axisLabel: {
                            color: 'rgba(131, 143, 141, 1)',
                            interval: 0 // 横轴信息全部显示
                            // rotate: -30 // -30度角倾斜显示
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '单位（个）',
                        nameTextStyle: {
                            color: 'rgba(255, 255, 255, 0.65)'
                        },
                        axisLabel: {
                            color: 'rgba(131, 143, 141, 1)' // y 轴标注颜色
                        },

                        splitLine: {
                            lineStyle: {
                                type: 'solid',
                                color: 'rgba(53, 65, 91, 1)'
                            },
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        name: series[0].name,
                        type: 'bar',
                        data: series[0].data,

                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, // 右
                                y: 0, // 下
                                x2: 0, // 左
                                y2: 1, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(89, 160, 215, 0.70)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(89, 160, 215, 0.1)' // 100% 处的颜色
                                    }
                                ]
                            }
                        },
                        barWidth: 8,
                        label: {
                            show: true,
                            width: 8,
                            height: 8,
                            borderRadius: 1000,
                            color: 'rgba(0,0,0,0)',
                            backgroundColor: 'rgba(115, 213, 255, 1)',
                            position: ['1%', -3],
                            shadowBlur: 10,
                            shadowColor: '#48B1F6'
                        }
                    },
                    {
                        name: series[1].name,
                        type: 'bar',
                        tooltip: {},
                        data: series[1].data,

                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, // 右
                                y: 0, // 下
                                x2: 0, // 左
                                y2: 1, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(223, 164, 120, 0.70)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(223, 164, 120, 0.1)' // 100% 处的颜色
                                    }
                                ]
                            }
                        },
                        barWidth: 8,
                        // barGap: '100%',
                        label: {
                            show: true,
                            width: 8,
                            height: 8,
                            borderRadius: 1000,
                            color: 'rgba(0,0,0,0)',
                            backgroundColor: 'rgba(255, 201, 75, 1)',
                            position: ['0%', -4],
                            shadowBlur: 6,
                            shadowColor: '#FBCC00'
                        }
                    }
                ]
            }

            this.leftChart1_1.setOption(option)
            this.leftChart1_1.on('click', this.handleClick1)
        },
        drawleftChart1_2(xAxis, series) {
            this.leftChart1_2 = this.$echarts.init(
                document.getElementById('leftChart1_2')
            )
            let option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#040B15',
                    borderColor: '#040B15',
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.65)',
                        fontSize: 12
                    },
                    formatter: function (params) {
                        // params 是 formatter 需要的数据集
                        let content = ''

                        params.forEach((item) => {
                            let colorArr = ['#48B1F6', '#DEA378']
                            // 提示框的内容样式及数据
                            content += `<div style="height: 20px; line-height: 20px;">
          <!-- 圆点样式 -->
          <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${
              colorArr[item.seriesIndex]
          };"></span>
          <span style="color: rgba(255, 255, 255, 0.65);">${
              item.seriesName
          }:</span>
          <span style="color: rgba(255, 255, 255, 0.65);">${item.value}</span>
         
        </div>`
                        })
                        // 提示框外框样式及内容数据
                        const htmlContent = `<div style="width: 150px; height: 90px;">
        <!-- 提示框顶部标题样式及数据 smsUseData.xAxis.date（标题数据）-->
        <div style="color: rgba(255, 255, 255, 0.65); padding: 0px 16px;">
        ${xAxis[params[0].dataIndex]}
        </div>
        <div style="padding: 4px 8px; position: relative;">
          ${content}
        </div>
        <div style="color: rgba(255, 255, 255, 0.75); padding: 0px 8px;font-size: 14px;
        font-weight: 600;">
           同比：<span style="color: ${
               series[2].data[params[0].dataIndex] > 0
                   ? '#f73131c2'
                   : '#0ebe98d6'
           }"> <span>${
                            series[2].data[params[0].dataIndex] > 0 ? '+' : ''
                        }</span>${series[2].data[params[0].dataIndex]}%</span>
        </div>
      </div>`

                        return htmlContent
                    }
                },
                grid: {
                    show: false,
                    top: '12%', // 一下数值可为百分比也可为具体像素值
                    right: '5%',
                    bottom: '25%',
                    left: '10%'
                },
                legend: {
                    data: [
                        {
                            name: series[0].name,
                            itemStyle: {
                                color: '#48B1F6'
                            }
                        },
                        {
                            name: series[1].name,
                            itemStyle: {
                                color: '#DEA378'
                            }
                        }
                    ],
                    bottom: '0%',
                    left: 'center',
                    textStyle: {
                        color: '#ffffff'
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    icon: 'circle',
                    fontSize: 12
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xAxis,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisTick: {
                            show: true,
                            color: 'rgba(131, 143, 141, 1)'
                        },
                        axisLabel: {
                            color: 'rgba(131, 143, 141, 1)',
                            interval: 0 // 横轴信息全部显示
                            // rotate: -30 // -30度角倾斜显示
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '单位（个）',
                        nameTextStyle: {
                            color: 'rgba(255, 255, 255, 0.65)'
                        },
                        axisLabel: {
                            color: 'rgba(131, 143, 141, 1)' // y 轴标注颜色
                        },

                        splitLine: {
                            lineStyle: {
                                type: 'solid',
                                color: 'rgba(53, 65, 91, 1)'
                            },
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        name: series[0].name,
                        type: 'bar',
                        data: series[0].data,

                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, // 右
                                y: 0, // 下
                                x2: 0, // 左
                                y2: 1, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(89, 160, 215, 0.70)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(89, 160, 215, 0.1)' // 100% 处的颜色
                                    }
                                ]
                            }
                        },
                        barWidth: 8,
                        label: {
                            show: true,
                            width: 8,
                            height: 8,
                            borderRadius: 1000,
                            color: 'rgba(0,0,0,0)',
                            backgroundColor: 'rgba(115, 213, 255, 1)',
                            position: ['1%', -3],
                            shadowBlur: 10,
                            shadowColor: '#48B1F6'
                        }
                    },
                    {
                        name: series[1].name,
                        type: 'bar',
                        tooltip: {},
                        data: series[1].data,

                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, // 右
                                y: 0, // 下
                                x2: 0, // 左
                                y2: 1, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(223, 164, 120, 0.70)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(223, 164, 120, 0.1)' // 100% 处的颜色
                                    }
                                ]
                            }
                        },
                        barWidth: 8,
                        // barGap: '100%',
                        label: {
                            show: true,
                            width: 8,
                            height: 8,
                            borderRadius: 1000,
                            color: 'rgba(0,0,0,0)',
                            backgroundColor: 'rgba(255, 201, 75, 1)',
                            position: ['0%', -4],
                            shadowBlur: 6,
                            shadowColor: '#FBCC00'
                        }
                    }
                ]
            }

            this.leftChart1_2.setOption(option)
            this.leftChart1_2.on('click', this.handleClick1)
        },
        drawleftChart2(xAxis, series) {
            this.leftChart2 = this.$echarts.init(
                document.getElementById('leftChart2')
            )
            let option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#040B15',
                    borderColor: '#040B15',
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.65)',
                        fontSize: 12
                    },
                    formatter: function (params) {
                        // params 是 formatter 需要的数据集
                        let content = ''

                        params.forEach((item, index) => {
                            let colorArr = ['#48B1F6', '#DEA378', '#FCB873']
                            let radioT = ''
                            if (index == 2) {
                                radioT = ` <!-- 折线样式 -->
          <span  style="display: inline-block; margin-right: 10px;margin-bottom: 3px; width: 16px; height: 2px;background-color: ${
              colorArr[item.seriesIndex]
          };"></span>`
                            } else {
                                radioT = ` <!-- 圆点样式 -->
          <span  style="display: inline-block; margin-right: 10px; ; border-radius: 50%; width: 8px; height: 8px;background-color: ${
              colorArr[item.seriesIndex]
          };"></span>`
                            }

                            // 提示框的内容样式及数据
                            content +=
                                `<div style="height: 20px; line-height: 20px;">
         ` +
                                radioT +
                                `
          <span style="color: rgba(255, 255, 255, 0.65);">${item.seriesName}:</span>
          <span style="color: rgba(255, 255, 255, 0.65);">${item.value}</span>
         
        </div>`
                        })
                        // 提示框外框样式及内容数据
                        const htmlContent = `<div style="width: 150px; height: 90px;">
        <!-- 提示框顶部标题样式及数据 smsUseData.xAxis.date（标题数据）-->
        <div style="color: rgba(255, 255, 255, 0.65); padding: 0px 16px;">
        ${xAxis[params[0].dataIndex]}
        </div>
        <div style="padding: 4px 8px; position: relative;">
          ${content}
        </div>
        
      </div>`

                        return htmlContent
                    }
                },
                grid: {
                    show: false,
                    top: '13%', // 一下数值可为百分比也可为具体像素值
                    right: '8%',
                    bottom: '25%',
                    left: '15%'
                },
                legend: {
                    data: [
                        {
                            name: series[0].name,
                            itemStyle: {
                                color: '#48B1F6'
                            }
                        },
                        {
                            name: series[1].name,
                            itemStyle: {
                                color: '#DEA378'
                            }
                        },
                        {
                            name: series[2].name,
                            itemStyle: {
                                color: '#FCB873'
                            },
                            icon: 'path://m0.010277,5.945418l24.979446,0l0,10.109164l-24.979446,0l0,-2.109164z'
                        }
                    ],
                    bottom: '0%',
                    left: 'center',
                    textStyle: {
                        color: '#ffffff'
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    icon: 'circle',
                    fontSize: 12
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xAxis,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisTick: {
                            show: true,
                            color: 'rgba(131, 143, 141, 1)'
                        },
                        axisLabel: {
                            color: 'rgba(131, 143, 141, 1)',
                            interval: 0 // 横轴信息全部显示
                            // rotate: -30 // -30度角倾斜显示
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '金额（万）',
                        nameTextStyle: {
                            color: 'rgba(255, 255, 255, 0.65)'
                        },
                        axisLabel: {
                            color: 'rgba(131, 143, 141, 1)' // y 轴标注颜色
                        },

                        splitLine: {
                            lineStyle: {
                                type: 'solid',
                                color: 'rgba(53, 65, 91, 1)'
                            },
                            show: true
                        }
                    },
                    {
                        type: 'value',
                        name: '金额（万）',
                        nameTextStyle: {
                            color: 'rgba(255, 255, 255, 0.65)'
                        },
                        axisLabel: {
                            color: 'rgba(131, 143, 141, 1)' // y 轴标注颜色
                        },

                        splitLine: {
                            lineStyle: {
                                type: 'solid',
                                color: 'rgba(53, 65, 91, 1)'
                            },
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        name: series[0].name,
                        type: 'bar',
                        data: series[0].data,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, // 右
                                y: 1, // 下
                                x2: 0, // 左
                                y2: 0, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(42, 37, 75, 1)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(89, 160, 215, 1)' // 100% 处的颜色
                                    }
                                ]
                            },
                            borderRadius: [6, 6, 6, 6]
                        },
                        barWidth: 8,
                        label: {
                            show: false, // 显示标签
                            position: 'top', // 将标签放在顶部位置
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
                    },
                    {
                        name: series[1].name,
                        type: 'bar',
                        tooltip: {},
                        data: series[1].data,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, // 右
                                y: 1, // 下
                                x2: 0, // 左
                                y2: 0, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(42, 37, 75, 1)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(223, 164, 120, 1)' // 100% 处的颜色
                                    }
                                ]
                            },
                            borderRadius: [6, 6, 6, 6]
                        },
                        barWidth: 8,
                        label: {
                            show: false, // 显示标签
                            position: 'top', // 将标签放在顶部位置
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
                    },
                    {
                        name: series[2].name,
                        type: 'line',
                        showSymbol: true,
                        symbol: 'circle', // 折点设定为实心点
                        symbolSize: 7, // 设定实心点的大小
                        itemStyle: {
                            color: '#FCB873',
                            shadowColor: '#edd9b3',
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0
                        },
                        lineStyle: {
                            shadowColor: '#CC7543',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            opacity: 1,
                            shadowBlur: 4,
                            type: 'solid',
                            width: 1
                        },
                        yAxisIndex: 1,
                        data: series[2].data
                    }
                ]
            }

            this.leftChart2.setOption(option)
            this.leftChart2.on('click', this.handleClick2)
        },
        drawleftChart2_1(xAxis, series) {
            this.leftChart2_1 = this.$echarts.init(
                document.getElementById('leftChart2_1')
            )
            let option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#040B15',
                    borderColor: '#040B15',
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.65)',
                        fontSize: 12
                    },
                    formatter: function (params) {
                        // params 是 formatter 需要的数据集
                        let content = ''

                        params.forEach((item) => {
                            let colorArr = ['#48B1F6', '#DEA378']
                            // 提示框的内容样式及数据
                            content += `<div style="height: 20px; line-height: 20px;">
          <!-- 圆点样式 -->
          <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${
              colorArr[item.seriesIndex]
          };"></span>
          <span style="color: rgba(255, 255, 255, 0.65);">${
              item.seriesName
          }:</span>
          <span style="color: rgba(255, 255, 255, 0.65);">${item.value}</span>
         
        </div>`
                        })
                        // 提示框外框样式及内容数据
                        const htmlContent = `<div style="width: 165px; height: 90px;">
        <!-- 提示框顶部标题样式及数据 smsUseData.xAxis.date（标题数据）-->
        <div style="color: rgba(255, 255, 255, 0.65); padding: 0px 16px;">
        ${xAxis[params[0].dataIndex]}
        </div>
        <div style="padding: 4px 8px; position: relative;">
          ${content}
        </div>
        <div style="color: rgba(255, 255, 255, 0.75); padding: 0px 8px;font-size: 14px;
        font-weight: 600;">
           同比：<span style="color: ${
               series[2].data[params[0].dataIndex] > 0
                   ? '#f73131c2'
                   : '#0ebe98d6'
           }"> <span>${
                            series[2].data[params[0].dataIndex] > 0 ? '+' : ''
                        }</span>${series[2].data[params[0].dataIndex]}%</span>
        </div>
      </div>`

                        return htmlContent
                    }
                },
                grid: {
                    show: false,
                    top: '12%', // 一下数值可为百分比也可为具体像素值
                    right: '5%',
                    bottom: '25%',
                    left: '19%'
                },
                legend: {
                    data: [
                        {
                            name: series[0].name,
                            itemStyle: {
                                color: '#48B1F6'
                            }
                        },
                        {
                            name: series[1].name,
                            itemStyle: {
                                color: '#DEA378'
                            }
                        }
                    ],
                    bottom: '0%',
                    left: 'center',
                    textStyle: {
                        color: '#ffffff'
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    icon: 'circle',
                    fontSize: 12
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xAxis,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisTick: {
                            show: true,
                            color: 'rgba(131, 143, 141, 1)'
                        },
                        axisLabel: {
                            color: 'rgba(131, 143, 141, 1)',
                            interval: 0 // 横轴信息全部显示
                            // rotate: -30 // -30度角倾斜显示
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '金额（万）',
                        nameTextStyle: {
                            color: 'rgba(255, 255, 255, 0.65)'
                        },
                        axisLabel: {
                            color: 'rgba(131, 143, 141, 1)' // y 轴标注颜色
                        },

                        splitLine: {
                            lineStyle: {
                                type: 'solid',
                                color: 'rgba(53, 65, 91, 1)'
                            },
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        name: series[0].name,
                        type: 'bar',
                        data: series[0].data,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, // 右
                                y: 1, // 下
                                x2: 0, // 左
                                y2: 0, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(42, 37, 75, 1)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(89, 160, 215, 1)' // 100% 处的颜色
                                    }
                                ]
                            },
                            borderRadius: [6, 6, 6, 6]
                        },
                        barWidth: 8,
                        label: {
                            show: false, // 显示标签
                            position: 'top', // 将标签放在顶部位置
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
                    },
                    {
                        name: series[1].name,
                        type: 'bar',
                        tooltip: {},
                        data: series[1].data,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, // 右
                                y: 1, // 下
                                x2: 0, // 左
                                y2: 0, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(42, 37, 75, 1)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(223, 164, 120, 1)' // 100% 处的颜色
                                    }
                                ]
                            },
                            borderRadius: [6, 6, 6, 6]
                        },
                        barWidth: 8,
                        label: {
                            show: false, // 显示标签
                            position: 'top', // 将标签放在顶部位置
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
                    }
                ]
            }

            this.leftChart2_1.setOption(option)
            this.leftChart2_1.on('click', this.handleClick2)
        },
        drawleftChart2_2(xAxis, series) {
            this.leftChart2_2 = this.$echarts.init(
                document.getElementById('leftChart2_2')
            )
            let option = {
                tooltip: {
                    trigger: 'axis',
                    confine: true, // 限制tootip在容器内
                    backgroundColor: '#040B15',
                    borderColor: '#040B15',
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.65)',
                        fontSize: 12
                    },
                    formatter: function (params) {
                        // params 是 formatter 需要的数据集
                        let content = ''
                        console.log(params)
                        params.forEach((item, index) => {
                            console.log()
                            let colorArr = [
                                '#48B1F6',
                                '#DEA378',
                                '#20D4D4',
                                '#CC7543'
                            ]
                            let radioT = ''
                            if (index > 1) {
                                radioT = ` <!-- 折线样式 -->
          <span  style="display: inline-block; margin-right: 10px;margin-bottom: 3px; width: 16px; height: 2px;background-color: ${
              colorArr[item.seriesIndex]
          };"></span>`
                            } else {
                                radioT = ` <!-- 圆点样式 -->
          <span  style="display: inline-block; margin-right: 10px; ; border-radius: 50%; width: 8px; height: 8px;background-color: ${
              colorArr[item.seriesIndex]
          };"></span>`
                            }
                            if (index == 1) {
                                let tong1 = `<div style="color: rgba(255, 255, 255, 0.75); padding: 0px 8px;font-size: 14px;
        font-weight: 600;">
           同比：<span style="color: ${
               series[2].data[params[0].dataIndex] > 0
                   ? '#f73131c2'
                   : '#0ebe98d6'
           }"> <span>${
                                    series[2].data[params[0].dataIndex] > 0
                                        ? '+'
                                        : ''
                                }</span>${
                                    series[2].data[params[0].dataIndex]
                                }%</span>
        </div>`

                                content +=
                                    `<div style=" line-height: 20px;">
         ` +
                                    radioT +
                                    `
          <span style="color: rgba(255, 255, 255, 0.65);">${item.seriesName}:</span>
          <span style="color: rgba(255, 255, 255, 0.65);">${item.value}</span>
         ` +
                                    tong1 +
                                    `
        </div>`
                            } else if (index == 3) {
                                let tong2 = `<div style="color: rgba(255, 255, 255, 0.75); padding: 0px 8px;font-size: 14px;
        font-weight: 600;">
           同比：<span style="color: ${
               series[5].data[params[0].dataIndex] > 0
                   ? '#f73131c2'
                   : '#0ebe98d6'
           }"> <span>${
                                    series[5].data[params[0].dataIndex] > 0
                                        ? '+'
                                        : ''
                                }</span>${
                                    series[5].data[params[0].dataIndex]
                                }%</span>
        </div>`

                                content +=
                                    `<div style=" line-height: 20px;">
         ` +
                                    radioT +
                                    `
          <span style="color: rgba(255, 255, 255, 0.65);">${item.seriesName}:</span>
          <span style="color: rgba(255, 255, 255, 0.65);">${item.value}</span>
         ` +
                                    tong2 +
                                    `
        </div>`
                            } else {
                                content +=
                                    `<div style="height: 20px; line-height: 20px;">
         ` +
                                    radioT +
                                    `
          <span style="color: rgba(255, 255, 255, 0.65);">${item.seriesName}:</span>
          <span style="color: rgba(255, 255, 255, 0.65);">${item.value}</span>
         
        </div>`
                            }
                        })
                        // 提示框外框样式及内容数据
                        const htmlContent = `<div style="width: 165px; height: 140px;">
        <!-- 提示框顶部标题样式及数据 smsUseData.xAxis.date（标题数据）-->
        <div style="color: rgba(255, 255, 255, 0.65); padding: 0px 16px;">
        ${xAxis[params[0].dataIndex]}
        </div>
        <div style="padding: 4px 8px; position: relative;">
          ${content}
        </div>
        
      </div>`

                        return htmlContent
                    }
                },
                grid: {
                    show: false,
                    top: '13%', // 一下数值可为百分比也可为具体像素值
                    right: '8%',
                    bottom: '25%',
                    left: '15%'
                },
                legend: {
                    data: [
                        {
                            name: series[0].name,
                            itemStyle: {
                                color: '#48B1F6'
                            }
                        },
                        {
                            name: series[1].name,
                            itemStyle: {
                                color: '#DEA378'
                            }
                        },
                        {
                            name: series[3].name,
                            itemStyle: {
                                color: '#20D4D4'
                            },
                            icon: 'path://m0.010277,5.945418l24.979446,0l0,10.109164l-24.979446,0l0,-2.109164z'
                        },
                        {
                            name: series[4].name,
                            itemStyle: {
                                color: '#CC7543'
                            },
                            icon: 'path://m0.010277,5.945418l24.979446,0l0,10.109164l-24.979446,0l0,-2.109164z'
                        }
                    ],
                    bottom: '0%',
                    left: 'center',
                    textStyle: {
                        color: '#ffffff'
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    icon: 'circle',
                    fontSize: 12
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xAxis,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisTick: {
                            show: true,
                            color: 'rgba(131, 143, 141, 1)'
                        },
                        axisLabel: {
                            color: 'rgba(131, 143, 141, 1)',
                            interval: 0 // 横轴信息全部显示
                            // rotate: -30 // -30度角倾斜显示
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '金额（万）',
                        nameTextStyle: {
                            color: 'rgba(255, 255, 255, 0.65)'
                        },
                        axisLabel: {
                            color: 'rgba(131, 143, 141, 1)' // y 轴标注颜色
                        },

                        splitLine: {
                            lineStyle: {
                                type: 'solid',
                                color: 'rgba(53, 65, 91, 1)'
                            },
                            show: true
                        }
                    },
                    {
                        type: 'value',
                        name: '金额（万）',
                        nameTextStyle: {
                            color: 'rgba(255, 255, 255, 0.65)'
                        },
                        axisLabel: {
                            color: 'rgba(131, 143, 141, 1)' // y 轴标注颜色
                        },

                        splitLine: {
                            lineStyle: {
                                type: 'solid',
                                color: 'rgba(53, 65, 91, 1)'
                            },
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        name: series[0].name,
                        type: 'bar',
                        data: series[0].data,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, // 右
                                y: 1, // 下
                                x2: 0, // 左
                                y2: 0, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(42, 37, 75, 1)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(89, 160, 215, 1)' // 100% 处的颜色
                                    }
                                ]
                            },
                            borderRadius: [6, 6, 6, 6]
                        },
                        barWidth: 8,
                        label: {
                            show: false, // 显示标签
                            position: 'top', // 将标签放在顶部位置
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
                    },
                    {
                        name: series[1].name,
                        type: 'bar',
                        tooltip: {},
                        data: series[1].data,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0, // 右
                                y: 1, // 下
                                x2: 0, // 左
                                y2: 0, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(42, 37, 75, 1)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(223, 164, 120, 1)' // 100% 处的颜色
                                    }
                                ]
                            },
                            borderRadius: [6, 6, 6, 6]
                        },
                        barWidth: 8,
                        label: {
                            show: false, // 显示标签
                            position: 'top', // 将标签放在顶部位置
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
                    },
                    {
                        name: series[3].name,
                        type: 'line',
                        showSymbol: true,
                        symbol: 'circle', // 折点设定为实心点
                        symbolSize: 7, // 设定实心点的大小
                        itemStyle: {
                            color: '#7EFFFF',
                            shadowColor: '#FF2B98F6',
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0
                        },
                        lineStyle: {
                            shadowColor: '#20D4D4',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            opacity: 1,
                            shadowBlur: 4,
                            type: 'solid',
                            width: 1
                        },
                        yAxisIndex: 1,
                        data: series[3].data
                    },
                    {
                        name: series[4].name,
                        type: 'line',
                        showSymbol: true,
                        symbol: 'circle', // 折点设定为实心点
                        symbolSize: 7, // 设定实心点的大小
                        itemStyle: {
                            color: '#FCB873',
                            shadowColor: '#edd9b3',
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0
                        },
                        lineStyle: {
                            shadowColor: '#CC7543',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            opacity: 1,
                            shadowBlur: 4,
                            type: 'solid',
                            width: 1
                        },
                        yAxisIndex: 1,
                        data: series[4].data
                    }
                ]
            }

            this.leftChart2_2.setOption(option)
            this.leftChart2_2.on('click', this.handleClick2)
        },
        drawleftChart3(piedata) {
            this.leftChart3 = this.$echarts.init(
                document.getElementById('leftChart3')
            )
            let option = {
                color: [
                    '#4796DB',
                    '#493FEE',
                    '#493FEE',
                    '#C76F3D',
                    '#36B59D',
                    '#8CAF49',
                    '#D4CC40',
                    '#D4CC40'
                ],
                tooltip: {
                    //悬浮提示内容
                    trigger: 'item'
                },
                legend: {
                    //图例文字
                    orient: 'horizontal',
                    bottom: '1%',
                    // icon: 'rect', //这个字段控制形状
                    icon: 'circle', //这个字段控制形状
                    itemGap: 10, //设置间距
                    itemHeight: 10,
                    itemWidth: 10,
                    textStyle: {
                        //图例文字的样式
                        color: '#424F65',
                        fontSize: 14,
                        fontWeight: 700,
                        rich: {
                            //这里面的 a、b 是在formatter中定义的
                            a: {
                                width: 100,
                                fontSize: 12,
                                fontWeight: 400,
                                color: '#e9e6e6'
                            },
                            b: {
                                width: 60,
                                fontSize: 10,
                                fontWeight: 700,
                                align: 'right',
                                color: '#3EF771'
                            }
                        }
                    },
                    // 重写legend显示样式 legend显示内容
                    formatter: function (name) {
                        let data = option.series[0].data
                        let total = 0
                        let tarValue = 0
                        for (let i = 0, l = data.length; i < l; i++) {
                            total += data[i].value
                            if (data[i].name == name) {
                                tarValue = data[i].value
                            }
                        }
                        let p = ((tarValue / total) * 100).toFixed(2)
                        // return [
                        //     '{a|' +
                        //         name +
                        //         '}{b|' +
                        //         (p ? parseFloat(p) : 0) +
                        //         '%}'
                        // ]
                        return ['{a|' + name + '}']
                    }
                },
                series: [
                    {
                        name: '提示：',
                        type: 'pie',
                        radius: ['35%', '55%'],
                        center: ['47%', '30%'], //环形图--显示位置
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                            normal: {
                                show: true,
                                position: 'center',
                                formatter: function () {
                                    return ' '
                                },
                                textStyle: {
                                    fontSize: 17,
                                    color: '#666'
                                }
                            }
                        },
                        itemStyle: {
                            borderColor: '#1b2037',
                            borderWidth: 3
                        },
                        data: piedata
                    }
                ]
            }

            this.leftChart3.setOption(option)
        },
        drawleftChart4(xAxis, series) {
            this.leftChart4 = this.$echarts.init(
                document.getElementById('leftChart4')
            )
            let option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#040B15',
                    borderColor: '#040B15',
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.65)',
                        fontSize: 12
                    }
                },
                grid: {
                    show: false,
                    top: '10%', // 一下数值可为百分比也可为具体像素值
                    right: '40%',
                    bottom: '16%',
                    left: '25%'
                },
                // legend: {
                //     bottom: '0%',
                //     left: 'center',
                //     textStyle: {
                //         color: 'rgba(255, 255, 255, 0.65)'
                //     },
                //     itemWidth: 10,
                //     itemHeight: 10
                // },
                xAxis: [
                    {
                        type: 'value',

                        axisPointer: {
                            type: 'shadow'
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        data: xAxis,
                        axisLabel: {
                            color: 'rgba(255, 255, 255, 0.65)' // y 轴标注颜色
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed', // 虚线
                                color: 'rgba(255, 255, 255, 0.15)'
                            },
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'bar',
                        data: series,
                        barMinHeight: 10,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 1, // 右
                                y: 0, // 下
                                x2: 0, // 左
                                y2: 0, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(51, 167, 240, 0.70)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(51, 167, 240, 0.1)' // 100% 处的颜色
                                    }
                                ]
                            },
                            borderRadius: [0, 6, 6, 0]
                        },
                        barWidth: 12,
                        label: {
                            show: true, // 显示标签
                            position: 'right', // 将标签放在顶部位置
                            textStyle: {
                                color: '#ffffff',
                                fontSize: 10
                            }
                        }
                    }
                    // {
                    //     name: '次均巡查覆盖度',
                    //     type: 'bar',
                    //     tooltip: {},
                    //     data: [10, 20, 30],
                    //     itemStyle: {
                    //         color: {
                    //             type: 'linear',
                    //             x: 1, // 右
                    //             y: 0, // 下
                    //             x2: 0, // 左
                    //             y2: 0, // 上
                    //             colorStops: [
                    //                 {
                    //                     offset: 0,
                    //                     color: 'rgba(251, 204, 0, 0.70)' // 0% 处的颜色
                    //                 },
                    //                 {
                    //                     offset: 1,
                    //                     color: 'rgba(251, 204, 0, 0)' // 100% 处的颜色
                    //                 }
                    //             ]
                    //         },
                    //         borderRadius: [0, 6, 6, 0]
                    //     },
                    //     barWidth: 12,
                    //     label: {
                    //         show: true, // 显示标签
                    //         position: 'right', // 将标签放在顶部位置
                    //         textStyle: {
                    //             color: '#ffffff'
                    //         }
                    //     }
                    // }
                ]
            }

            this.leftChart4.setOption(option)
        },
        drawleftChart5(piedata) {
            this.leftChart5 = this.$echarts.init(
                document.getElementById('leftChart5')
            )
            let option = {
                color: [
                    '#4796DB',
                    '#493FEE',
                    '#493FEE',
                    '#C76F3D',
                    '#36B59D',
                    '#8CAF49',
                    '#D4CC40',
                    '#D4CC40',
                    '#D4CC40'
                ],
                tooltip: {
                    //悬浮提示内容
                    trigger: 'item'
                },
                legend: {
                    //图例文字
                    orient: 'horizontal',
                    bottom: '1%',
                    // icon: 'rect', //这个字段控制形状
                    icon: 'circle', //这个字段控制形状
                    itemGap: 10, //设置间距
                    itemHeight: 10,
                    itemWidth: 10,
                    textStyle: {
                        //图例文字的样式
                        color: '#424F65',
                        fontSize: 14,
                        fontWeight: 700,
                        rich: {
                            //这里面的 a、b 是在formatter中定义的
                            a: {
                                width: 50,
                                fontSize: 12,
                                fontWeight: 400,
                                color: '#e9e6e6'
                            },
                            b: {
                                width: 60,
                                fontSize: 12,
                                fontWeight: 700,
                                align: 'right',
                                color: '#3EF771'
                            }
                        }
                    },
                    // 重写legend显示样式 legend显示内容
                    formatter: function (name) {
                        let data = option.series[0].data
                        let total = 0
                        let tarValue = 0
                        for (let i = 0, l = data.length; i < l; i++) {
                            total += data[i].value
                            if (data[i].name == name) {
                                tarValue = data[i].value
                            }
                        }
                        let p = ((tarValue / total) * 100).toFixed(2)
                        // return [
                        //     '{a|' +
                        //         name +
                        //         '}{b|' +
                        //         (p ? parseFloat(p) : 0) +
                        //         '%}'
                        // ]
                        return ['{a|' + name + '}']
                    }
                },
                series: [
                    {
                        name: '提示：',
                        type: 'pie',
                        radius: ['35%', '55%'],
                        center: ['47%', '30%'], //环形图--显示位置
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                            normal: {
                                show: true,
                                position: 'center',
                                formatter: function () {
                                    return ' '
                                },
                                textStyle: {
                                    fontSize: 17,
                                    color: '#666'
                                }
                            }
                        },
                        itemStyle: {
                            borderColor: '#1b2037',
                            borderWidth: 3
                        },
                        data: piedata
                    }
                ]
            }

            this.leftChart5.setOption(option)
        },
        drawleftChart6(xAxis, series) {
            this.leftChart6 = this.$echarts.init(
                document.getElementById('leftChart6')
            )
            let option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#040B15',
                    borderColor: '#040B15',
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.65)',
                        fontSize: 12
                    }
                },
                grid: {
                    show: false,
                    top: '10%', // 一下数值可为百分比也可为具体像素值
                    right: '40%',
                    bottom: '16%',
                    left: '25%'
                },

                xAxis: [
                    {
                        type: 'value',

                        axisPointer: {
                            type: 'shadow'
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        data: xAxis,
                        axisLabel: {
                            color: 'rgba(255, 255, 255, 0.65)' // y 轴标注颜色
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed', // 虚线
                                color: 'rgba(255, 255, 255, 0.15)'
                            },
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'bar',
                        data: series,
                        barMinHeight: 10,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 1, // 右
                                y: 0, // 下
                                x2: 0, // 左
                                y2: 0, // 上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(51, 167, 240, 0.70)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(51, 167, 240, 0.1)' // 100% 处的颜色
                                    }
                                ]
                            },
                            borderRadius: [0, 6, 6, 0]
                        },
                        barWidth: 12,
                        label: {
                            show: true, // 显示标签
                            position: 'right', // 将标签放在顶部位置
                            textStyle: {
                                color: '#ffffff',
                                fontSize: 10
                            }
                        }
                    }
                ]
            }

            this.leftChart6.setOption(option)
        },
        changeCP(val) {
            this.activeis = val
            this.$nextTick(() => {
                this.config3 = { ...this.config3 }
                this.config5 = { ...this.config5 }
            })
        },
        // echarts点击
        handleClick1(params) {
            if (this.paramsData.month) {
                this.paramsData.month = ''
            } else {
                this.paramsData.month = this.getMonthstr(params.name)
            }

            this.$emit('allChangeData', this.paramsData)
        },
        handleClick2(params) {
            if (this.paramsData.month) {
                this.paramsData.month = ''
            } else {
                this.paramsData.month = this.getMonthstr(params.name)
            }

            this.$emit('allChangeData', this.paramsData)
        },
        changeListedAmount(name) {
            if (this.paramsData.listedAmount) {
                this.paramsData.listedAmount = ''
            } else {
                this.paramsData.listedAmount = name
            }

            this.$emit('allChangeData', this.paramsData)
        },
        changeTransactionAmount(name) {
            if (this.paramsData.transactionAmount) {
                this.paramsData.transactionAmount = ''
            } else {
                this.paramsData.transactionAmount = name
            }

            this.$emit('allChangeData', this.paramsData)
        },
        // 过滤月份数据01 02
        getMonthstr(str) {
            let numberS = str.match(/\d+/)[0]
            return numberS.length > 1 ? numberS : '0' + numberS
        },
        // 打开详情
        openInfo(name, isScroll) {
            this.$emit('openInfo', name, isScroll)
        },
        // 切换挂牌成交同比
        changeGPCJ(val) {
            this.gpcjActiveis = val
        },
        // 切换挂牌成交金额同比
        changeYGPCJJE(val) {
            this.YgpcjjeActiveis = val
        }
    },
    beforeDestroy() {
        if (this.leftChart1) {
            this.leftChart1.off('click', this.handleClick1)
            this.leftChart1.dispose()
        }
        if (this.leftChart2) {
            this.leftChart2.off('click', this.handleClick2)
            this.leftChart2.dispose()
        }
    },
    components: {}
}
</script>

<style lang="scss" scoped>
.leftBox {
    width: 100%;
    position: relative;
    .Ltap {
        position: absolute;
        left: 2px;
        top: 0;
        width: 32px;
        height: 660px;
        img {
            width: 100%;
            height: 100%;
        }
    }

    .chart-box {
        width: 100%;
        background-size: cover;
        height: 100%;
        position: relative;
        overflow: hidden;
        background: rgba(30, 39, 75, 0.6);
        &-title {
            width: 363px;
            height: 33px;
            background-image: url('../../../assets/home/maxT.png');
            background-size: 100%;
            position: absolute;
            left: 0;
            top: 0;
            font-weight: bold;
            color: #ffffff;
            line-height: 30px;
            font-size: 15px;
            text-indent: 34px;
            .unit {
                font-size: 13px;
                font-weight: 400;
                font-style: italic;
            }
        }
        .titledisBox {
            display: flex;
        }
        &-titledis {
            width: 251px;
            height: 33px;
            background-image: url('../../../assets/home/maxTdis.png');
            background-size: 100%;
            position: absolute;
            left: 0;
            top: 0;
            font-weight: bold;
            color: #ffffff;
            line-height: 30px;
            font-size: 15px;
            text-indent: 34px;
            &.r {
                left: 251px;
            }
            cursor: pointer;
            &.active {
                background-image: url('../../../assets/home/maxTact.png');
            }
            .unit {
                font-size: 13px;
                font-weight: 400;
                font-style: italic;
            }
        }
        &-titledisThr {
            width: 159px;
            height: 33px;
            background-image: url('../../../assets/home/maxTdisThr.png');
            background-size: 100%;
            position: absolute;
            left: 0;
            top: 0;
            font-weight: bold;
            color: #ffffff;
            line-height: 30px;
            font-size: 15px;
            text-indent: 34px;
            &.r1 {
                left: 159px;
            }
            &.r2 {
                left: 318px;
            }
            cursor: pointer;
            &.active {
                background-image: url('../../../assets/home/maxTactThr.png');
            }
            .unit {
                font-size: 13px;
                font-weight: 400;
                font-style: italic;
            }
        }
    }
    // .chartTbiao {
    //     font-size: 14px;
    //     font-family: MicrosoftYaHei;
    //     background-image: -webkit-linear-gradient(
    //         bottom,
    //         #2bb3ff 0%,
    //         #38e7ee 100%
    //     );
    //     -webkit-background-clip: text;
    //     -webkit-text-fill-color: transparent;
    //     font-weight: 600;
    // }
    .datavBox {
        width: 100%;
        box-sizing: border-box;
        padding: 0 30px 20px 20px;
        // display: flex;
        // align-items: center;
        // justify-content: center;
    }
    .chartDatavEL {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        li {
            display: flex;
            font-size: 11px;
            color: #ffffff;
            line-height: 18px;
            align-items: center;
            min-width: 50%;
            .radiu {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                margin-right: 6px;
            }
            transition: transform 0.3s ease; /*添加动画效果*/
            &:hover {
                transform: scale(1.2);
            }
        }
    }
    .chartIobox {
        width: 100%;
    }

    .chartArr {
        display: flex;
        .chartArrItem {
            &:nth-of-type(1) {
                width: 60%;
            }
            &:nth-of-type(2) {
                width: 40%;
            }
        }
    }
    .L1_box {
        height: 298px;
        box-sizing: border-box;
        padding: 47px 26px 10px 16px;
    }
    .L2_box {
        height: 285px;
        box-sizing: border-box;
        padding: 47px 26px 10px 16px;
        margin-top: 15px;
    }
    .L3_box {
        height: 295px;
        box-sizing: border-box;
        padding: 47px 30px 10px 16px;
        margin-top: 15px;
    }
}
</style>